<template>
    <div>

        <el-table :data="questionList" v-if="questionList.length">
            <el-table-column type="expand">
                <template slot-scope="props">

                    <div v-for="item in props.row.options" :key="item.id" style="margin:10px 50px;">
                        <el-tag :type="item.id == props.row.answerId ? 'success' : 'info'"
                            :effect="item.id == props.row.answerId ? 'light' : 'plain'">
                            {{ item.label + " " + item.text }}
                        </el-tag>
                    </div>



                </template>
            </el-table-column>
            <el-table-column prop="id" label="id" width="140">
            </el-table-column>
            <el-table-column prop="type" label="组合名" width="120">
            </el-table-column>
            <el-table-column prop="question" label="分析状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="openData(scope.row.id)" type="text">数据</el-button>
                    <el-button @click="openMetric(scope.row.id)" type="text">指标</el-button>
                    <el-button @click="analyse(scope.row.id)" type="text">分析</el-button>
                    <el-button @click="deleteQue(scope.row.id)" type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-empty description="暂无数据" v-else></el-empty>
        <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="searchForm.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination></div>





        <el-dialog title="数据" :visible.sync="dataVisible">
            <el-table :data="tableData" border  height="500" style="width: 100%;  margin-top: 20px">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="code" label="代码">
                </el-table-column>
                <el-table-column prop="num" label="数值">
                </el-table-column>

            </el-table>

        </el-dialog>


        <el-dialog title="指标" :visible.sync="metricVisible" @open="drawAll">

            <el-row>

                <el-col :span="10" :offset="2">
                    <div class="chart_text">MDD:</div>
                </el-col>
                <el-col :span="10" :offset="2">
                    <div class="chart_text">CR:</div>
                </el-col>

            </el-row>
            <el-row>

                <el-col :span="12">
                    <div class="lineDom" ref="MDD">123</div>
                </el-col>
                <el-col :span="12">
                    <div class="lineDom" ref="CR">123</div>
                </el-col>

            </el-row>
            <el-row>

                <el-col :span="10" :offset="2">
                    <div class="chart_text">VOR:123</div>
                </el-col>
                <el-col :span="10" :offset="2">
                    <div class="chart_text">SR:123</div>
                </el-col>

            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { getAllQuestion, deleteQuestion } from "@/api/question"//要删
import { getCalculate, getDetails } from "@/api/metric"

var option = {
    color: ["#3C69CA"],
    tooltip: {
        trigger: "axis",
        axisPointer: {
            snapboolean: "true",
            label: {
                color: "#9a9a9a"
            },
            type: "none",
            crossStyle: {
                color: "#999"
            }
        }
    },
    grid: {
        top: 20,
        left: 80,
        right: 80,
        height: 160
    },
    xAxis: {
        boundaryGap: false, //刻度不从0开始
        axisTick: {
            show: false
        }, //不显示刻度
        axisLine: {
            lineStyle: {
                color: "#e3e3e3" //坐标轴线的颜色
            }
        },
        axisLabel: {
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
                color: "#666666", //x轴上的字体颜色
                fontSize: "12" // x轴字体大小
            }
        },
        splitLine: {
            show: false // 网格线是否显示
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: "value",
        axisLine: {
            lineStyle: {
                color: "#e3e3e3" //坐标轴线的颜色
            }
        },
        axisTick: {
            show: false
        }, //不显示刻度
        splitLine: {
            show: true, // 网格线是否显示
            //  改变样式
            lineStyle: {
                color: "#E3E3E3", // 修改网格线颜色
                type: "dotted" //虚线
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#666666",
                fontSize: "12"
            }
        }
    },
    series: [
        {
            name: "浏览量（PV）",
            type: "line",
            areaStyle: {
                color: "#EEF3FF"
            },
            data: [150, 230, 224, 218, 135, 147, 260]//从0开始
        }
    ]
};
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data() {
        return {
            questionList: [],
            total: 100,
            totalPage: 0,

            searchForm: {
                typeId: "",
                page: 1,
                size: 10
            },



            tableData: [{
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
            }, {
                id: '',
                name: '王小虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
            }, {
                id: '',
                name: '王小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
            }, {
                id: '12987125',
                name: '王小虎',
                amount1: '621',
                amount2: '2.2',
                amount3: 17
            }, {
                id: '12987126',
                name: '王小虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
            }],
            formAnswer: "",
            typeOption: [],
            dialogFormVisible: false,
            dataVisible: false,
            metricVisible: false

        }
    },
    created() {
        this.getQuestion(this.searchForm);

    },
    methods: {
        //获取列表数据
        async getQuestion(form) {
            await getAllQuestion(form).then(res => {

                this.questionList = res.data.data.contentList
                this.total = res.data.data.totalNum
                this.totalPage = res.data.data.totalPage
                // form = { typeId: "" }
            }).catch(error => {
                console.log(error)
            })
        },







        openData(id) {
            this.dataVisible = true;

            let data = {
                "2024-11-02": {
                    "603823": 0.2,
                    "603717": 0.1,
                    "603233": 0.5,
                    "603315": 0.2
                },

                "2024-11-01": {
                    "603823": 0.3,
                    "603717": 0.2,
                    "603233": 0.4,
                    "603315": 0.1
                }
            }

            this.tableData = []
            let previousDate = "";

            for (let date in data) {
                for (let code in data[date]) {
                    this.tableData.push({
                        date: previousDate == date ? '' : date,
                        code: code,
                        num: data[date][code]
                    });
                    previousDate = date;
                }
                
            }


            // getDetails(id).then(res => {
            //     data = res.data.data
            //   todo.....
            // })



        },

        //画指标
        drawAll() {
            let data = {
                "VOL": 0.1716,
                "MDD": {
                    "2024-11-06": 0.1551
                },
                "CR": {
                    "2024-11-04": 0.0,
                    "2024-11-05": 1.0876,
                    "2024-11-06": 2.0064
                },
                "SR": -0.3134
            }


            this.$nextTick(() => {
                let arr = ["MDD", "CR"];
                arr.forEach(el => {
                    option.xAxis.data = Object.keys(data[el])
                    option.series[0].data = Object.values(data[el])
                    option.series[0].name = el;
                    this.drawPie(el);
                })




            });

            // getCalculate(this.drawId).then(res => {
            //     data = res.data.data;
            //todo。。。。。。
            // })


        },
        drawPie(key) {
            console.log("draw")
            // 初始化echarts实例
            this[key] = this.$echarts.init(this.$refs[key]);

            this[key].resize();

            // 绘制图表
            this[key].setOption(option, true);

            // 图表自适应
            let that = this;
            window.addEventListener("resize", function () {
                that[key].resize();
            });
        },

        openMetric(id) {
            this.metricVisible = true;
            this.drawId = id;

        },
        deleteQue(id) {
            this.$confirm('确定删除该题目?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteQuestion(id).then(async () => {
                    await this.getQuestion(this.searchForm);
                    if (this.searchForm.page > this.totalPage) {
                        this.searchForm.page = this.totalPage;
                        this.getQuestion(this.searchForm);
                    }
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                })

            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });



        },

        analyse() {
            this.$confirm('确定分析?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {


            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });



        },


        handleSizeChange(val) {
            this.searchForm.size = val
            this.getQuestion(this.searchForm);
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.searchForm.page = val
            this.getQuestion(this.searchForm);

            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}

.pagination {
    margin-top: 10px;
    float: right;
}

.lineDom {
    height: 220px;
    width: 100%;
    margin: 0px;
    background-color: #fff;
}

.chart_text {}
</style>